<template>
  <div>
    <div class="crud-group">
      <el-input
        v-model="paramsForm.tblName"
        placeholder="表名"
        clearable
      />
      <div>
        <el-button
          type="success"
          icon="el-icon-search"
          @click="getData"
        >
          搜索
        </el-button>
        <el-button
          type="warning"
          icon="el-icon-refresh-left"
          @click="reset"
        >
          重置
        </el-button>
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="addDialogVisible = true"
        >
          新增
        </el-button>
      </div>
    </div>

    <el-table
      v-loading="loading"
      border
      :data="data"
    >
      <el-table-column
        label="表名"
        prop="tblName"
      />

      <el-table-column
        label="操作"
        width="100px"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="()=>{
              selectedRow = {
                tblName: scope.row.tblName,
                id: scope.row.id
              };
              editDialogVisible = true
            }
            "
          >编辑</el-button>
          <el-button
            size="mini"
            type="text"
            @click="()=>{
              deleteUatBlackList(scope.row.id)
            }"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination
        layout="prev, pager, next,sizes,total"
        :page-sizes="[5, 10, 20, 30, 40]"
        :current-page="paramsForm.current"
        :page-size="paramsForm.size"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <AddDialog
      :dialog-visible="addDialogVisible"
      @close="()=>{
        addDialogVisible = false;
        getData()
      }"
    />
    <EditDialog
      :id="selectedRow.id"
      :dialog-visible="editDialogVisible"
      :tbl-name="selectedRow.tblName"
      @close="()=>{
        editDialogVisible = false;
        getData()
      }"
    />

  </div>

</template>

<script>
import uatSyncApi from '@/api/dashboard/uatSync'
import AddDialog from './AddDialog'
import EditDialog from './EditDialog'

export default {
  components: {
    AddDialog,
    EditDialog
  },
  data() {
    return {
      loading: false,
      addDialogVisible: false,
      editDialogVisible: false,
      selectedRow: {
        id: null,
        tblName: null
      },
      total: 0,
      paramsForm: {
        current: 1,
        size: 10,
        tblName: ''
      },
      data: [
      ]
    }
  },
  created() {
    this.getData()
  },
  methods: {
    deleteUatBlackList(id) {
      this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const form = {
          id,
          del: 1
        }
        uatSyncApi.editUatBlackList(form).then(res => {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.getData()
        })
        // delete
      }).catch(() => {
        // cancel
      })
    },
    getData(resetPage = true) {
      if (resetPage) {
        this.paramsForm.current = 1
      }
      this.loading = true
      uatSyncApi.getUatBlackList(this.paramsForm).then(res => {
        this.data = res.records
        this.total = res.total
      }).finally(() => {
        this.loading = false
      })
    },
    reset() {
      this.paramsForm = {
        current: 1,
        size: 10,
        tblName: ''
      }
      this.getData()
    },
    add() {

    },
    handleSizeChange(val) {
      this.paramsForm.size = val
      this.getData()
    },
    handleCurrentChange(val) {
      this.paramsForm.current = val
      this.getData(false)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
